<template>
  <div>
    <p>插槽:为了显示子组件中间的内容。是一个特殊的容器，有插槽就显示，没有就舍弃。</p>
    <p>1. 匿名插槽：没有名字，不做筛选，全部显示。有一个隐含的名字，即name="default"</p>
    <p>2. 具名插槽：有名字,名字对应的可以显示。各回各家，各找各妈。</p>
    <p>3. 作用域插槽：可以传递变量的插槽</p>
    <son1>
      <!-- 具名插槽，老语法是slot="top",新语法是#top -->
      <!-- <mark>666</mark>
      <template #top>
        <p>777</p>
        <input type="text" value="777">
        <br />
      </template> -->
      <template v-slot:list="props">
        <li>{{props.item}}</li>
      </template>
    </son1>
  </div>
</template>

<script>
import son1 from './son1'
export default {
  components: {
    son1
  }
}
</script>

<style>

</style>